<template>
  <el-container v-loading="loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
    v-if="device.length>0">
    <el-header height="81px">
      <div class="flex ydsl-top">
        <img src="../../static/images/logo.png" alt="" class="logoimg">
        <div class="everyOtherOine"></div>
        <div class="ydslTitle ca0a0a0">设备分析看板</div>
        <div class="deviceName">MTO: 2016040</div>
        <!-- {{device[index].name}} -->
      </div>
    </el-header>
    <el-main class="elMain equipmentMain">
      <el-carousel indicator-position="outside" :autoplay="autoplay" class="elCarousel" trigger="click" @change="activeChange">
        <el-carousel-item v-for="(item,index) in device" :key="index">
          <div class="clear">
            <analysis1 class="scfx-chartbox fl" :chartData='item.table1'></analysis1>
            <div class="fr wbfz40">
              <analysis2 class="pjkjl-chartbox" :chartData='item.table4'></analysis2>
              <analysis3 class="pjlyl-chartbox" :chartData='item.table4'></analysis3>
            </div>
          </div>
          <div class="clear mgt20">
            <div class="fl totalProduction">
              <div class="fl">
                <div class="cfff fs18">月生产总量</div>
                <div class="c00ffff fs24 mgt5">{{item.table2.Alloutput}}Kg</div>
                <div class="mgt10">
                  <div class="flex mgt10" v-for="(i,idx) in parseInt(item.layer)" :key="idx">
                    <div class="tipsblock" :class="className[idx]"></div>
                    <div class="cfff totaltipstxt">{{layer[idx]}}层：{{item.table2[output[idx]]}}Kg，{{item.table2[output[idx]]==0 || null ? '0' : parseInt(item.table2[output[idx]]/item.table2.Alloutput*100)}}%</div>
                  </div>
                </div>
                <!-- <div class="flex mgt20">
                  <div class="tipsblock bgdd6b66"></div>
                  <div class="cfff totaltipstxt">A层：{{item.table2.A_output}}Kg，{{item.table2.A_output==0 || null ? '0' : parseInt(item.table2.A_output/item.table2.Alloutput*100)}}%</div>
                </div>
                <div class="flex mgt10">
                  <div class="tipsblock bgea7e53"></div>
                  <div class="cfff totaltipstxt">B层：{{item.table2.B_output}}Kg，{{item.table2.B_output==0 || null ? '0' : parseInt(item.table2.B_output/item.table2.Alloutput*100)}}%</div>
                </div>
                <div class="flex mgt10">
                  <div class="tipsblock bg8dc1a9"></div>
                  <div class="cfff totaltipstxt">C层：{{item.table2.C_output}}Kg，{{item.table2.C_output==0 || null ? '0' : parseInt(item.table2.C_output/item.table2.Alloutput*100)}}%</div>
                </div>
                <div class="flex mgt10">
                  <div class="tipsblock bge69d87"></div>
                  <div class="cfff totaltipstxt">D层：{{item.table2.D_output}}Kg，{{item.table2.D_output==0 || null ? '0' : parseInt(item.table2.D_output/item.table2.Alloutput*100)}}%</div>
                </div>
                <div class="flex mgt10">
                  <div class="tipsblock bg759aa0"></div>
                  <div class="cfff totaltipstxt">E层：{{item.table2.E_output}}Kg，{{item.table2.E_output==0 || null ? '0' : parseInt(item.table2.E_output/item.table2.Alloutput*100)}}%</div>
                </div> -->
              </div>
              <analysis4 class="fr ysczl-chartbox" :chartData='item.table2' :layer="item.layer"></analysis4>
            </div>
            <div class="fl productionEfficiency">
              <div class="cfff fs18">生产效率分析</div>
              <div class="clear mgt20">
                <div class="clear">
                  <div class="fl fs12 cfff">月平均利用率</div>
                  <div class="fr mgr10 fs12 cfff">{{item.table3.run_rate}}%</div>
                </div>
                <div class="progressBarBox mgt10">
                  <div class="progressBar progress-pjlyl" :style="{width:item.table3.run_rate+'%'}"></div>
                </div>
              </div>
              <div class="clear mgt20">
                <div class="clear">
                  <div class="fl fs12 cfff">月平均开机率</div>
                  <div class="fr mgr10 fs12 cfff">{{item.table3.open_rate}}%</div>
                </div>
                <div class="progressBarBox mgt10">
                  <div class="progressBar progress-pjkjl" :style="{width:item.table3.open_rate+'%'}"></div>
                </div>
              </div>
              <div class="clear mgt20">
                <div class="clear">
                  <div class="fl fs12 cfff">月平均生产时间</div>
                  <div class="fr mgr10 fs12 cfff">{{item.table3.output_day}}%</div>
                </div>
                <div class="progressBarBox mgt10">
                  <div class="progressBar progress-pjscsj" :style="{width:item.table3.output_day+'%'}"></div>
                </div>
              </div>
            </div>
            <analysis5 class="fr clhz-chartbox" :chartData='item.table4' :layer="item.layer"></analysis5>
          </div>
        </el-carousel-item>
      </el-carousel>
    </el-main>
  </el-container>
</template>

<script>
  import $ from 'jquery';
  // console.log($(".totalProduction").height());
  // console.log($(".productionEfficiency").height());
  import axios from 'axios'
  import analysis1 from './analysisChart1'
  import analysis2 from './analysisChart2'
  import analysis3 from './analysisChart3'
  import analysis4 from './analysisChart4'
  import analysis5 from './analysisChart5'
  import vline from './lineChart'
  import myline from './mylineChart'
  import g2gague from './g2gauge'
  import qs from 'qs'
  import { getCookie, delCookie } from '../cookieUtil/cookieUtil';

  export default {
    name: 'Index',
    components: {
      'analysis1': analysis1,
      'analysis2': analysis2,
      'analysis3': analysis3,
      'analysis4': analysis4,
      'analysis5': analysis5,
      'Vline': vline,
      'myline': myline,
      'g2gague': g2gague,
    },

    data () {
      //var activeId=this.device[0].id;
      return {
        autoplay:false,
        loading: false,
        device:[
          // {
          //   id:1,
          //   fName:'N02313',
          // },
          // {
          //   id:2,
          //   fName:'N02314',
          // },
          // {
          //   id:3,
          //   fName:'N02315',
          // },
        ],
        scfxData:[],
        pjkjlData:[],
        pjlylData:[],
        ysczlData:[],
        clhzData:[],
        index:0,
        output:["A_output","B_output","C_output","D_output","E_output","F_output","G_output"],
        layer:["A","B","C","D","E","F","G"],
        className:['bgdd6b66','bgea7e53','bg8dc1a9','bge69d87','bg759aa0','bgea7e53','bg8dc1a9']
      }
    },
    filters: {
      capitalize: function (value) {
        console.log('filtersvalue',value)
        if (value==NaN) return 0
        value = parseInt(value*100);
        return value;
      }
    },
    created(){
      
    },
    mounted() {
      this.getDeviceattribute();
      this.loading=true;
    },
    methods: {
      //切换tag
      handleSelect (key) {
        this.tagIndex = key;
      },

      //快捷跳转
      toBoard (id, moduleId) {
        this.tagIndex = moduleId;
        // console.log(id)
        // console.log(moduleId)
      },

      //退出
      exit (){
        delCookie('userId')
        this.$router.push({
          path: "/",
        });
      },
      getDeviceattribute(){
        this.loading=true;
        this.$ajax.post(this.url+'/Home/deviceattribute').then(res => {
          console.log('status',res.status);
          if(res.status == 200){
            this.loading=false;
            console.log(res.data);
            this.device=res.data;
          }
        }).catch(error => {
          this.loading=false;
          console.log(error);
        })
      },
      activeChange(index){
        console.log('changeid',index);
        this.index=index;
      },
    }
  }
</script>

<style scoped>
</style>
